{# Copyright (c) 2014-2017, NVIDIA CORPORATION.  All rights reserved. #}

{% extends "job.html" %}
{% from "helper.html" import serve_file %}

{% macro print_job_information() %}
<div class="panel-heading">
    <h4>Job Information</h4>
</div>
<div class="panel-body">
    <dl>
        <dt>Job Directory</dt>
        <dd>{{ job.dir() }}</dd>
    </dl>
    <dl>
        <dt>Image Dimensions</dt>
        <dd>{{job.image_dims[1]}}x{{job.image_dims[0]}} (Width x Height)</dd>
        <dt>Image Type</dt>
        <dd>{{'Color' if job.image_dims[2] == 3 else 'Grayscale'}}</dd>
        <dt>Resize Transformation</dt>
        <dd>{{ job.resize_mode_name() }}</dd>
        <dt>DB Backend</dt>
        <dd>{{job.get_backend()}}</dd>
        <dt>Image Encoding</dt>
        <dd>{{job.get_encoding()}}</dd>
        <dt>DB Compression</dt>
        <dd>{{job.get_compression()}}</dd>
    </dl>
    <dl>
        <dt>Dataset size</dt>
        <dd>{{job.disk_size_fmt()}}</dd>
    </dl>
</div>
{% endmacro %}

{% macro print_parse_folder_task(task) %}
<div class="panel-heading">
    <h4>{{task.name()}}</h4>
</div>
<div class="panel-body">
    <dl>
        <dt>Folder</dt>
        <dd>{{task.folder}}</dd>
    </dl>
    <dl>
        {% if task.label_count %}
        <dt>Number of Categories</dt>
        <dd>{{task.label_count}}</dd>
        {% endif %}
        {% if task.train_count %}
        <dt>Training Images</dt>
        <dd>{{task.train_count}}</dd>
        {% endif %}
        {% if task.val_count %}
        <dt>Validation Images</dt>
        <dd>
        {{task.val_count}}
        {% if task.percent_val != 0 and task.percent_val != 100 %}
        ({{task.percent_val}}%)
        {% endif %}
        </dd>
        {% endif %}
        {% if task.test_count %}
        <dt>Test images</dt>
        <dd>
        {{task.test_count}}
        {% if task.percent_test != 0 and task.percent_test != 100 %}
        ({{task.percent_test}}%)
        {% endif %}
        </dd>
        {% endif %}
    </dl>
</div>
{% endmacro %}

{% macro print_create_db_task(task) %}
<div class="panel-heading">
    <h4>{{task.name()}}</h4>
</div>
<div class="panel-body">
    <dl>
        <dt>Input File{{' (before shuffling)' if task.shuffle }}</dt>
        <dd>{{serve_file(task, task.input_file)}}</dd>
        {% if task.create_db_log_file %}
        <dt>DB Creation log file</dt>
        <dd>{{serve_file(task, task.create_db_log_file)}}</dd>
        {% endif %}
        {% if task.entries_count %}
        <dt>DB Entries</dt>
        <dd>
        {{task.entries_count}}
        {% if task.entries_error %} ({{task.entries_error}} failed to load) {% endif %}
        </dd>
        {% endif %}
    </dl>

    {# Category distribution graph #}
    <div class="distribution-graph" style="display:none;"></div>
    {% if task.distribution_data() %}
        <script>
            drawDistributionGraph("{{task.html_id()}}",
                {% autoescape false %}
                {{task.distribution_data()}}
                {% endautoescape %}
            );
        </script>
    {% endif %}

    {# Mean image #}
    <div class="mean-image" style="display:none;">
        <b>Image Mean:</b>
        <img class="mean-image" />
    </div>
    {% if task.status=='D' and task.mean_file %}
        <script>
            displayMeanImage("{{task.html_id()}}",
                "{{url_for('digits.views.serve_file', path=task.path('mean.jpg', relative=True))}}");
        </script>
    {% endif %}

    {# Exploration #}
    {% if task.backend=='lmdb' %}
        <div class="exploration" style="display:none;">
            <a href="{{url_for('digits.dataset.images.classification.views.explore', job_id=job.id(), db=task.db_name.lower())}}" class="btn btn-primary">Explore the db</a>
        </div>
        {% if task.status=='D' %}
            <script>
                showExplorationLink("{{task.html_id()}}");
            </script>
        {% endif %}
    {% endif %}
</div>
{% endmacro %}

{% block job_content %}
<style>
    .distribution-graph g.c3-axis-x g.tick {
        display: none;
    }
</style>
<script>
    function drawDistributionGraph(task_id, data) {
        var selector = "#"+task_id+" .distribution-graph";
        $(selector).show();
        c3.generate($.extend(true, data, {
            bindto: selector,
            axis: {
                x: {
                    label: {
                        text: 'Category',
                        position: 'outer-center',
                    },
                    tick: {
                        culling: true,
                    },
                },
                y: {
                    label: {
                        text: 'Image Count',
                        position: 'outer-middle',
                        min: 0,
                    }
                }
            },
            legend: {show: false},
        }));
    }
    function displayMeanImage(task_id, url) {
        $("#"+task_id+" img.mean-image").attr("src", url);
        $("#"+task_id+" div.mean-image").show();
    }
    function showExplorationLink(task_id) {
        $("#"+task_id+" div.exploration").show();
    }
</script>

{% if job.parse_folder_tasks()|length == 1 %}
{% set task = job.parse_folder_tasks()[0] %}
<div class="row">
    <div class="col-sm-6">
        <div id="job-information" class="panel panel-default">
            {{ print_job_information() }}
        </div>
    </div>
    <div class="col-sm-6">
        <div id="{{task.html_id()}}" class="panel panel-default">
            {{ print_parse_folder_task(task) }}
        </div>
    </div>
</div>
{% else %}
<div class="row">
    <div class="col-sm-6 col-sm-offset-3">
        <div id="job-information" class="panel panel-default">
            {{ print_job_information() }}
        </div>
    </div>
</div>
{% if job.parse_folder_tasks()|length == 2 %}
<div class="row">
    {% set task = job.parse_folder_tasks()[0] %}
    <div class="col-sm-6">
        <div id="{{task.html_id()}}" class="panel panel-default">
            {{ print_parse_folder_task(task) }}
        </div>
    </div>
    {% set task = job.parse_folder_tasks()[1] %}
    <div class="col-sm-6">
        <div id="{{task.html_id()}}" class="panel panel-default">
            {{ print_parse_folder_task(task) }}
        </div>
    </div>
</div>
{% elif job.parse_folder_tasks()|length == 3 %}
<div class="row">
    {% set task = job.parse_folder_tasks()[0] %}
    <div class="col-sm-4">
        <div id="{{task.html_id()}}" class="panel panel-default">
            {{ print_parse_folder_task(task) }}
        </div>
    </div>
    {% set task = job.parse_folder_tasks()[1] %}
    <div class="col-sm-4">
        <div id="{{task.html_id()}}" class="panel panel-default">
            {{ print_parse_folder_task(task) }}
        </div>
    </div>
    {% set task = job.parse_folder_tasks()[2] %}
    <div class="col-sm-4">
        <div id="{{task.html_id()}}" class="panel panel-default">
            {{ print_parse_folder_task(task) }}
        </div>
    </div>
</div>
{% endif %}
{% endif %}

{% for task in job.create_db_tasks() %}
<div class="row">
    <div class="col-sm-12">
        <div id="{{task.html_id()}}" class="panel panel-default">
            {{ print_create_db_task(task) }}
        </div>
    </div>
</div>
{% endfor %}

{% endblock %}
